<template>
  <v-bottom-navigation :value="this.$route.path" app grow shift color="#2AB795">
    <v-btn value="/home" @click="navBtnClick('home')">
      <span>首页</span>
      <v-icon>mdi-home</v-icon>
    </v-btn>

    <v-btn value="/category" @click="navBtnClick('category')">
      <span>分类</span>
      <v-icon>mdi-view-grid</v-icon>
    </v-btn>

    <v-btn value="/profile" @click="navBtnClick('profile')">
      <span>我的</span>
      <v-icon>mdi-account</v-icon>
    </v-btn>
  </v-bottom-navigation>
</template>

<script>
export default {
  name: 'app-buttombar',
  data() {
    return {
      bottomNav: '/home'
    };
  },
  methods: {
    navBtnClick(path) {
      if (path == 'home') {
        this.$router.push({ path: `/` });
      } else {
        this.$router.push({ path: `/${path}` });
      }
    }
  }
};
</script>
